import React, { useMemo, useEffect } from 'react';
import * as THREE from 'three';
import { useLoader } from '@react-three/fiber';
// import { Text } from '@react-three/drei'; // replaced with CanvasTexture-based text to avoid depth material setter issues
import { WALLS, ROOM_BOUNDS } from './walls';
import { registerZone, unregisterZone } from './narrationStore';
import NarrationSystem from './NarrationSystem';
//

// 现代大理石地面材质
function ModernFloorMaterial() {
	const texture = useMemo(() => {
		const size = 1024;
		const canvas = document.createElement('canvas');
		canvas.width = canvas.height = size;
		const ctx = canvas.getContext('2d')!;

		// 现代大理石纹理
		ctx.fillStyle = '#f8f9fa';
		ctx.fillRect(0, 0, size, size);

		// 大理石纹理
		const gradient = ctx.createLinearGradient(0, 0, size, size);
		gradient.addColorStop(0, '#ffffff');
		gradient.addColorStop(0.3, '#f0f2f5');
		gradient.addColorStop(0.7, '#e9ecef');
		gradient.addColorStop(1, '#dee2e6');
		ctx.fillStyle = gradient;
		ctx.fillRect(0, 0, size, size);

		// 大理石纹理线条
		ctx.strokeStyle = 'rgba(200, 200, 200, 0.3)';
		ctx.lineWidth = 2;
		for (let i = 0; i < 20; i++) {
			ctx.beginPath();
			ctx.moveTo(Math.random() * size, Math.random() * size);
			ctx.lineTo(Math.random() * size, Math.random() * size);
			ctx.stroke();
		}

		const t = new THREE.CanvasTexture(canvas);
		t.wrapS = t.wrapT = THREE.RepeatWrapping;
		t.repeat.set(2, 2);
		return t;
	}, []);
	return <meshStandardMaterial map={texture} color={'#f8f9fa'} roughness={0.1} metalness={0.1} />;
}

// 现代墙面材质
function ModernWallMaterial() {
	const texture = useMemo(() => {
		const size = 512;
		const canvas = document.createElement('canvas');
		canvas.width = canvas.height = size;
		const ctx = canvas.getContext('2d')!;

		// 现代白色墙面
		const gradient = ctx.createLinearGradient(0, 0, 0, size);
		gradient.addColorStop(0, '#ffffff');
		gradient.addColorStop(0.5, '#f8f9fa');
		gradient.addColorStop(1, '#e9ecef');
		ctx.fillStyle = gradient;
		ctx.fillRect(0, 0, size, size);

		// 微妙的纹理
		ctx.fillStyle = 'rgba(240, 242, 245, 0.5)';
		for (let i = 0; i < 100; i++) {
			ctx.fillRect(Math.random() * size, Math.random() * size, 2, 2);
		}

		const t = new THREE.CanvasTexture(canvas);
		t.wrapS = t.wrapT = THREE.RepeatWrapping;
		t.repeat.set(1, 1);
		return t;
	}, []);
	return <meshStandardMaterial map={texture} color={'#ffffff'} roughness={0.2} metalness={0.0} />;
}

const Wall: React.FC<{ p: [number, number, number]; s: [number, number, number] }> = ({ p, s }) => (
	<mesh position={p}>
		<boxGeometry args={s} />
		<ModernWallMaterial />
	</mesh>
);

// 可重用的画作组件
const ArtworkFrame: React.FC<{
	position: [number, number, number];
	rotation: [number, number, number];
	texture: THREE.Texture;
	width: number;
	height: number;
	title: string;
	label: string;
	id?: string;
}> = ({ position, rotation, texture, width, height, title, label, id }) => {
	// 注册讲解触发区（基于画作位置/朝向）
	useEffect(() => {
		if (!id) return;
		// 计算法线：将(0,0,1)应用到给定欧拉角
		const e = new THREE.Euler(rotation[0], rotation[1], rotation[2]);
		const n = new THREE.Vector3(0, 0, 1).applyEuler(e).normalize();
		// 触发区中心：在画作前方略微偏移（朝向房间内）
		const center: [number, number, number] = [
			position[0] + n.x * 0.4,
			position[1],
			position[2] + n.z * 0.4
		];
		registerZone({
			id,
			position: center,
			normal: [n.x, n.y, n.z],
			width: width + 0.6,
			height: Math.max(0.6, height)
		});
		return () => { unregisterZone(id); };
	}, [id, position, rotation, width, height]);
	return (
		<group position={position} rotation={rotation}>
			{/* 现代画框 */}
			<mesh position={[0, 0, -0.05]}>
				<planeGeometry args={[width + 0.2, height + 0.2]} />
				<meshStandardMaterial color={'#2c3e50'} metalness={0.8} roughness={0.2} />
			</mesh>
			<mesh position={[0, 0, -0.03]}>
				<planeGeometry args={[width + 0.1, height + 0.1]} />
				<meshStandardMaterial color={'#34495e'} metalness={0.6} roughness={0.3} />
			</mesh>
			{/* 画作 - 确保在最前面 */}
			<mesh position={[0, 0, 0.01]}>
				<planeGeometry args={[width, height]} />
				<meshBasicMaterial map={texture} toneMapped={false} />
			</mesh>
			{/* 现代标签 - 一直显示 */}
			<group position={[0, -(height / 2) - 0.4, 0]}>
				{/* 统一背板（固定不透明色，放在墙前、文字后） */}
				<mesh position={[0, -0.16, 0.003]}>
					<planeGeometry args={[1.8, 0.42]} />
					<meshBasicMaterial color={'#fff'} depthWrite={false} toneMapped={false} fog={false} />
				</mesh>
				{/* 使用canvas纹理显示文字，确保显示 */}
				<mesh position={[0, -0.08, 0.012]}>
					<planeGeometry args={[1.5, 0.24]} />
					<meshBasicMaterial
						map={useMemo(() => {
							const canvas = document.createElement('canvas');
							canvas.width = 512;
							canvas.height = 80;
							const ctx = canvas.getContext('2d')!;
							ctx.fillStyle = '#2c3e50';
							ctx.font = 'bold 48px Arial';
							ctx.textAlign = 'center';
							ctx.textBaseline = 'middle';
							ctx.fillText(title, canvas.width / 2, canvas.height / 2);
							return new THREE.CanvasTexture(canvas);
						}, [title])}
						transparent
					/>
				</mesh>
				<mesh position={[0, -0.2, 0.012]}>
					<planeGeometry args={[1.5, 0.15]} />
					<meshBasicMaterial
						map={useMemo(() => {
							const canvas = document.createElement('canvas');
							canvas.width = 300;
							canvas.height = 30;
							const ctx = canvas.getContext('2d')!;
							ctx.fillStyle = '#34495e';
							ctx.font = '16px Arial';
							ctx.textAlign = 'center';
							ctx.textBaseline = 'middle';
							ctx.fillText(label, 150, 15);
							return new THREE.CanvasTexture(canvas);
						}, [label])}
						transparent
					/>
				</mesh>
			</group>

			{/* 就地提示：当该画作成为当前候选时显示 */}
			{/* 自动模式下不显示提示；若未来需要手动模式再恢复 */}
		</group>
	);
};

const ExhibitionHall: React.FC = () => {
	const { W, L, H } = ROOM_BOUNDS;
	
	// load artworks
	const texIII = useLoader(THREE.TextureLoader, new URL('../../Img/iii.jpg', import.meta.url).href);
	const texJJJ = useLoader(THREE.TextureLoader, new URL('../../Img/jjj.jpg', import.meta.url).href);
	const texTT = useLoader(THREE.TextureLoader, new URL('../../Img/tt.jpg', import.meta.url).href);
	const texUU = useLoader(THREE.TextureLoader, new URL('../../Img/uu.jpg', import.meta.url).href);
	const texOO = useLoader(THREE.TextureLoader, new URL('../../Img/oo.jpg', import.meta.url).href);
	const texFF = useLoader(THREE.TextureLoader, new URL('../../Img/ff.jpg', import.meta.url).href);
	const texCC = useLoader(THREE.TextureLoader, new URL('../../Img/cc.jpg', import.meta.url).href);
	const texPP = useLoader(THREE.TextureLoader, new URL('../../Img/pp.jpg', import.meta.url).href);
	// new: decorative textures
	const texBand = useLoader(THREE.TextureLoader, new URL('../../Img/iu.png', import.meta.url).href);
	// palace ceiling texture
	const texCeiling = useLoader(THREE.TextureLoader, new URL('../../Img/ceiling.png', import.meta.url).href);
	useMemo(() => {
		if (texBand) {
			texBand.wrapS = texBand.wrapT = THREE.RepeatWrapping;
			texBand.anisotropy = 8;
			// repeat horizontally along long walls
			const horizontalRepeats = Math.max(2, Math.round(L / 3));
			texBand.repeat.set(horizontalRepeats, 1);
		}
		// configure ceiling texture to cover the ceiling without distortion
		if (texCeiling) {
			texCeiling.wrapS = THREE.ClampToEdgeWrapping;
			texCeiling.wrapT = THREE.ClampToEdgeWrapping;
			texCeiling.anisotropy = 8;
			const img = texCeiling.image as { width?: number; height?: number } | undefined;
			if (img && img.width && img.height) {
				const roomAspect = W / L;
				const imageAspect = (img.width as number) / (img.height as number);
				let rx = 1, ry = 1;
				if (imageAspect > roomAspect) {
					rx = roomAspect / imageAspect; ry = 1;
				} else {
					rx = 1; ry = imageAspect / roomAspect;
				}
				texCeiling.repeat.set(rx, ry);
				texCeiling.offset.set((1 - rx) / 2, (1 - ry) / 2);
				texCeiling.needsUpdate = true;
			}
		}
		return undefined;
	}, [texBand, texCeiling, W, L]);
	// compute strict aspect sizes from image pixels
	const [wIII, hIII] = useMemo(() => {
		const targetHeight = 1.2; // visual height in meters
		const img = texIII?.image as { width?: number; height?: number } | undefined;
		if (img && img.width && img.height) {
			const aspect = img.width / img.height;
			const w = targetHeight * aspect;
			return [w, targetHeight];
		}
		return [1.8, 1.2];
	}, [texIII]);
	const [wJJJ, hJJJ] = useMemo(() => {
		const targetHeight = 1.4;
		const img = texJJJ?.image as { width?: number; height?: number } | undefined;
		if (img && img.width && img.height) {
			const aspect = img.width / img.height;
			const w = targetHeight * aspect;
			return [w, targetHeight];
		}
		return [1.4, 1.4];
	}, [texJJJ]);

	function computeSize(tex: THREE.Texture, targetHeight: number): [number, number] {
		const img = tex?.image as { width?: number; height?: number } | undefined;
		if (img && img.width && img.height) {
			const aspect = (img.width as number) / (img.height as number);
			const w = targetHeight * aspect;
			return [w, targetHeight];
		}
		return [targetHeight, targetHeight];
	}

	// sizes for remaining artworks
	const [wTT, hTT] = useMemo(() => computeSize(texTT, 1.2), [texTT]);
	const [wUU, hUU] = useMemo(() => computeSize(texUU, 1.2), [texUU]);
	const [wOO, hOO] = useMemo(() => computeSize(texOO, 1.2), [texOO]);
	const [wFF, hFF] = useMemo(() => computeSize(texFF, 1.2), [texFF]);
	const [wCC, hCC] = useMemo(() => computeSize(texCC, 1.2), [texCC]);
	const [wPP, hPP] = useMemo(() => computeSize(texPP, 1.2), [texPP]);
	return (
		<group>
			{/* floor (modern marble) */}
			<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow>
				<planeGeometry args={[W, L]} />
				<ModernFloorMaterial />
			</mesh>

			{/* perimeter walls (taller palace red) */}
			<Wall p={[0, (H + 1) / 2, -L / 2]} s={[W, H + 1, 0.2]} />
			<Wall p={[0, (H + 1) / 2, L / 2]} s={[W, H + 1, 0.2]} />
			<Wall p={[-W / 2, (H + 1) / 2, 0]} s={[0.2, H + 1, L]} />
			<Wall p={[W / 2, (H + 1) / 2, 0]} s={[0.2, H + 1, L]} />

			{/* lower wainscot (护墙) around room */}
			<mesh position={[0, 0.6, -L / 2 + 0.101]}>
				<boxGeometry args={[W, 1.2, 0.02]} />
				<meshStandardMaterial color={'#6f2626'} roughness={0.98} />
			</mesh>
			<mesh position={[0, 0.6, L / 2 - 0.101]}>
				<boxGeometry args={[W, 1.2, 0.02]} />
				<meshStandardMaterial color={'#6f2626'} roughness={0.98} />
			</mesh>
			<mesh position={[-W / 2 + 0.101, 0.6, 0]}>
				<boxGeometry args={[0.02, 1.2, L]} />
				<meshStandardMaterial color={'#6f2626'} roughness={0.98} />
			</mesh>
			<mesh position={[W / 2 - 0.101, 0.6, 0]}>
				<boxGeometry args={[0.02, 1.2, L]} />
				<meshStandardMaterial color={'#6f2626'} roughness={0.98} />
			</mesh>

			{/* decorative top band on side walls */}
			<group position={[-W / 2 + 0.051, 2.7, 0]} rotation={[0, Math.PI / 2, 0]}>
				<mesh>
					<planeGeometry args={[L, 0.4]} />
					<meshBasicMaterial map={texBand} toneMapped={false} transparent={false} />
				</mesh>
			</group>
			<group position={[W / 2 - 0.051, 2.7, 0]} rotation={[0, -Math.PI / 2, 0]}>
				<mesh>
					<planeGeometry args={[L, 0.4]} />
					<meshBasicMaterial map={texBand} toneMapped={false} transparent={false} />
				</mesh>
			</group>

			{/* headline text centered on front-adjacent wall (CanvasTexture) */}
			<mesh position={[0, 2, 2 + 0.12]} rotation={[0, 0, 0]}>
				<planeGeometry args={[3.2, 1.0]} />
				<meshBasicMaterial
					transparent
					toneMapped={false}
					map={useMemo(() => {
						const canvas = document.createElement('canvas');
						canvas.width = 1024;
						canvas.height = 320;
						const ctx = canvas.getContext('2d')!;
						ctx.clearRect(0, 0, canvas.width, canvas.height);
						ctx.fillStyle = '#FFD700';
						ctx.font = 'bold 220px Arial';
						ctx.textAlign = 'center';
						ctx.textBaseline = 'middle';
						ctx.shadowColor = 'rgba(0,0,0,0.35)';
						ctx.shadowBlur = 8;
						ctx.fillText('欢迎光临', canvas.width / 2, canvas.height / 2);
						const tex = new THREE.CanvasTexture(canvas);
						tex.anisotropy = 8;
						return tex;
					}, [])}
				/>
			</mesh>


			{/* interior partitions from shared list (reduced height) */}
			{WALLS.map((w, i) => (
				<Wall key={i} p={[w.cx, (H - 0.6) / 2, w.cz]} s={[w.sx, H - 0.6, w.sz]} />
			))}

			{/* simple gallery baseboard (skirting) around room */}
			<mesh position={[0, 0.05, -L / 2 + 0.01]}>
				<boxGeometry args={[W, 0.1, 0.02]} />
				<meshStandardMaterial color={'#5e2020'} roughness={0.9} />
			</mesh>
			<mesh position={[0, 0.05, L / 2 - 0.01]}>
				<boxGeometry args={[W, 0.1, 0.02]} />
				<meshStandardMaterial color={'#5e2020'} roughness={0.9} />
			</mesh>
			<mesh position={[-W / 2 + 0.01, 0.05, 0]}>
				<boxGeometry args={[0.02, 0.1, L]} />
				<meshStandardMaterial color={'#5e2020'} roughness={0.9} />
			</mesh>
			<mesh position={[W / 2 - 0.01, 0.05, 0]}>
				<boxGeometry args={[0.02, 0.1, L]} />
				<meshStandardMaterial color={'#5e2020'} roughness={0.9} />
			</mesh>

			{/* ceiling: single full cover plane */}
			<mesh position={[0, H + 1 + 0.005, 0]} rotation={[Math.PI / 2, 0, 0]}>
				<planeGeometry args={[W + 0.2, L + 0.2]} />
				<meshBasicMaterial map={texCeiling} toneMapped={false} polygonOffset polygonOffsetFactor={-2} polygonOffsetUnits={-2} />
			</mesh>

			{/* 讲解系统 */}
			<NarrationSystem />

			{/* right wall artworks (now 4) - 现代画框设计 */}
			<ArtworkFrame
				id="yiriyou"
				position={[W / 2 - 0.14, 2.2, -6]}
				rotation={[0, -Math.PI / 2, 0]}
				texture={texPP}
				width={wPP}
				height={hPP}
				title="一日游"
				label="模特：小羊 | 年份：2005"
			/>
			<ArtworkFrame
				id="dudu"
				position={[W / 2 - 0.14, 2.2, -2]}
				rotation={[0, -Math.PI / 2, 0]}
				texture={texIII}
				width={wIII}
				height={hIII}
				title="嘟嘟嘴"
				label="模特：小羊 | 年份：2005"
			/>
			<ArtworkFrame
				id="taohua"
				position={[W / 2 - 0.14, 2.2, 2]}
				rotation={[0, -Math.PI / 2, 0]}
				texture={texJJJ}
				width={wJJJ}
				height={hJJJ}
				title="桃花"
				label="模特：小羊 | 年份：2005"
			/>
			<ArtworkFrame
				id="zhuangjingshen"
				position={[W / 2 - 0.14, 2.2, 6]}
				rotation={[0, -Math.PI / 2, 0]}
				texture={texCC}
				width={wCC}
				height={hCC}
				title="装精神"
				label="模特：小羊 | 年份：2005"
			/>

			{/* left wall frames - 现代画框设计 */}
			{[
				{ id: 'zhengjing', tex: texTT, w: wTT, h: hTT, z: -5, title: '正经', label: '模特：小羊 | 年份：2005' },
				{ id: 'weixun', tex: texUU, w: wUU, h: hUU, z: -1.5, title: '微醺', label: '模特：小羊 | 年份：2005' },
				{ id: 'yijiutianmei', tex: texOO, w: wOO, h: hOO, z: 2, title: '依旧甜妹', label: '模特：小羊 | 年份：2005' },
				{ id: 'zhuangtianmei', tex: texFF, w: wFF, h: hFF, z: 5, title: '装甜妹', label: '模特：小羊 | 年份：2005' }].map((a, i) => (
					<ArtworkFrame
						key={i}
						id={a.id}
						position={[-W / 2 + 0.14, 2.2, a.z]}
						rotation={[0, Math.PI / 2, 0]}
						texture={a.tex as unknown as THREE.Texture}
						width={a.w}
						height={a.h}
						title={a.title}
						label={a.label}
					/>
				))}


			{/* 现代吊顶设计 */}
			<mesh position={[0, H + 0.8, 0]} rotation={[-Math.PI / 2, 0, 0]}>
				<planeGeometry args={[W - 2, L - 2]} />
				<meshStandardMaterial color={'#f8f9fa'} roughness={0.1} metalness={0.0} />
			</mesh>

			{/* 现代吊顶装饰条 */}
			<mesh position={[0, H + 0.85, 0]} rotation={[-Math.PI / 2, 0, 0]}>
				<planeGeometry args={[W - 1, L - 1]} />
				<meshStandardMaterial color={'#e9ecef'} roughness={0.2} />
			</mesh>

			{/* 现代家具 - 中央休息区 */}
			<group position={[0, 0, 0]}>
				{/* 现代沙发 */}
				<mesh position={[0, 0.2, 2]}>
					<boxGeometry args={[3, 0.4, 1]} />
					<meshStandardMaterial color={'#6c757d'} roughness={0.3} />
				</mesh>
				<mesh position={[0, 0.6, 2]}>
					<boxGeometry args={[3.2, 0.8, 1.2]} />
					<meshStandardMaterial color={'#495057'} roughness={0.4} />
				</mesh>

				{/* 咖啡桌 */}
				<mesh position={[0, 0.2, 0]}>
					<cylinderGeometry args={[0.8, 0.8, 0.4, 8]} />
					<meshStandardMaterial color={'#343a40'} metalness={0.8} roughness={0.2} />
				</mesh>
			</group>

			{/* 现代装饰灯带 */}
			<mesh position={[0, H + 0.1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
				<planeGeometry args={[W - 0.5, 0.2]} />
				<meshStandardMaterial color={'#007bff'} emissive={'#007bff'} emissiveIntensity={0.3} />
			</mesh>

			{/* 会议桌区域（红色长条内侧） */}
			<group position={[0.5, 0, -5]} rotation={[0, 0, 0]}>
				{/* 地毯（略大于桌面，弱反光低饱和） */}
				<mesh position={[0, 0.01, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
					<planeGeometry args={[5.6, 2.4]} />
					<meshStandardMaterial color={'#6c757d'} roughness={0.95} metalness={0.0} />
				</mesh>
				{/* 桌面 */}
				<mesh position={[0, 0.8, 0]}>
					<boxGeometry args={[5.0, 0.1, 1.8]} />
					<meshStandardMaterial color={'#2f3640'} roughness={0.5} metalness={0.1} />
				</mesh>
				{/* 桌腿 */}
				<mesh position={[-2.2, 0.4, -0.7]}>
					<boxGeometry args={[0.15, 0.8, 0.15]} />
					<meshStandardMaterial color={'#3d3d3d'} />
				</mesh>
				<mesh position={[2.2, 0.4, -0.7]}>
					<boxGeometry args={[0.15, 0.8, 0.15]} />
					<meshStandardMaterial color={'#3d3d3d'} />
				</mesh>
				<mesh position={[-2.2, 0.4, 0.7]}>
					<boxGeometry args={[0.15, 0.8, 0.15]} />
					<meshStandardMaterial color={'#3d3d3d'} />
				</mesh>
				<mesh position={[2.2, 0.4, 0.7]}>
					<boxGeometry args={[0.15, 0.8, 0.15]} />
					<meshStandardMaterial color={'#3d3d3d'} />
				</mesh>

				{/* 椅子（10把，环绕桌子） */}
				{[
					// 负Z侧（面朝+Z）
					[-1.7, -1.15, 0],
					[-0.6, -1.15, 0],
					[0.6, -1.15, 0],
					[1.7, -1.15, 0],
					// 正Z侧（面朝-Z）
					[-1.7, 1.15, Math.PI],
					[-0.6, 1.15, Math.PI],
					[0.6, 1.15, Math.PI],
					[1.7, 1.15, Math.PI],
					// 两端（对齐拉正）
					[2.6, 0, -Math.PI / 2],
					[-2.6, 0, Math.PI / 2]

				].map(([x, z, rot], i) => (
					<group key={i} position={[x as number, 0, z as number]} rotation={[0, rot as number, 0]}>
						{/* 椅座 */}
						<mesh position={[0, 0.45, 0]}>
							<boxGeometry args={[0.6, 0.08, 0.6]} />
							<meshStandardMaterial color={'#4b4b4b'} roughness={0.6} />
						</mesh>
						{/* 椅背 */}
						<mesh position={[0, 0.75, -0.25]}>
							<boxGeometry args={[0.6, 0.6, 0.06]} />
							<meshStandardMaterial color={'#5a5a5a'} />
						</mesh>
						{/* 椅腿 */}
						{[
							[-0.25, 0.2, -0.25], [0.25, 0.2, -0.25], [-0.25, 0.2, 0.25], [0.25, 0.2, 0.25]
						].map((q, j) => (
							<mesh key={j} position={[q[0], q[1], q[2]]}>
								<cylinderGeometry args={[0.04, 0.04, 0.4, 8]} />
								<meshStandardMaterial color={'#6e6e6e'} />
							</mesh>
						))}
					</group>
				))}
			</group>
			{/* track lights (spotlights) aiming at frames - 现代LED灯 */}
			<spotLight position={[W / 2 - 0.6, 3.2, -6]} angle={0.4} penumbra={0.9} intensity={1.2} color={'#ffffff'} target-position={[W / 2 - 0.11, 2.2, -6]} />
			<spotLight position={[W / 2 - 0.6, 3.2, -2]} angle={0.4} penumbra={0.9} intensity={1.3} color={'#ffffff'} target-position={[W / 2 - 0.11, 2.2, -2]} />
			<spotLight position={[W / 2 - 0.6, 3.2, 2]} angle={0.4} penumbra={0.9} intensity={1.2} color={'#ffffff'} target-position={[W / 2 - 0.11, 2.2, 2]} />
			<spotLight position={[W / 2 - 0.6, 3.2, 6]} angle={0.4} penumbra={0.9} intensity={1.2} color={'#ffffff'} target-position={[W / 2 - 0.11, 2.2, 6]} />
			<spotLight position={[-W / 2 + 0.6, 3.2, -3]} angle={0.4} penumbra={0.9} intensity={1.2} color={'#ffffff'} target-position={[-W / 2 + 0.11, 2.2, -3]} />

			
			
			{/* 环境光增强 */}
			<ambientLight intensity={0.4} color={'#f8f9fa'} />
			<directionalLight position={[10, 10, 5]} intensity={0.6} color={'#ffffff'} />
		</group>
	);
};

export default ExhibitionHall;
